<template>
  <div>
    <y-card class-name="filter-container">
      <el-form ref="searchForm" :inline="true" :model="queryParams">
        <el-form-item prop="userName">
          <el-input v-model="queryParams.userName" placeholder="账号" size="small" />
        </el-form-item>
        <el-form-item prop="sex">
          <el-select v-model="queryParams.sex" clearable placeholder="性别" size="small">
            <el-option label="男" value="1" />
            <el-option label="女" value="0" />
          </el-select>
        </el-form-item>
        <el-form-item prop="isPublish">
          <el-select v-model="queryParams.isPublish" clearable placeholder="状态" size="small">
            <el-option label="启用" value="1" />
            <el-option label="禁用" value="0" />
          </el-select>
        </el-form-item>
        <el-form-item prop="stateList">
          <el-select-tree
            v-model="queryParams.stateList"
            placeholder="请选择内容"
            :data="treeData"
            multiple
            clearable
            size="small"
          />
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" @click="search">查询</el-button>
          <el-button size="small" @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </y-card>

    <y-card>
      <table-common
        ref="table"
        url="/system/user"
        operate-tool-bar="export"
        :where="queryParams"
        @add="handleAdd"
        @detail="handleDetail"
        @delete="handleDelete"
      >
        <!-- <template #toolbar>
          <el-button
            type="primary"
            style="margin-bottom:5px;"
            size="small"
            @click="handleAdd"
          >新增</el-button>
          <el-button
            type="primary"
            style="margin-bottom:5px;"
            size="small"
            @click="handleAddv2"
          >新增v2</el-button>
        </template> -->
        <el-table-column prop="userName" label="账号" width="180" />
        <el-table-column prop="nickName" label="姓名" width="180" />
        <el-table-column prop="email" label="邮箱" width="180" />
        <el-table-column prop="phoneNumber" label="手机号码" width="180" />
        <el-table-column prop="sex" label="性别" width="100" :formatter="sex" />
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status"
              active-color="#13ce66"
              active-value="0"
              inactive-value="1"
            />
          </template>
        </el-table-column>
      </table-common>
    </y-card>

    <form-dialog :dialog-visible.sync="dialogVisible" type="add" title="表单" />
    <form-dialog-v-2 :dialog-visible.sync="dialogVisible2" type="add" title="表单" />

    <detail :dialog-visible.sync="detailVisible" />
  </div>
</template>

<script>
import Detail from './Detail.vue'
import FormDialog from './FormDialog.vue'
import FormDialogV2 from './FormDialogV2.vue'

export default {
  components: { FormDialog, Detail, FormDialogV2 },
  data() {
    return {
      queryParams: {
        userName: '',
        sex: '',
        isPublish: '',
        stateList: []
      },
      treeData: [
        { value: 1, label: 'data1' },
        { value: 2, label: 'data2' },
        { value: 3, label: 'data3' },
        { value: 4, label: 'data4' },
        { value: 5, label: 'data5' },
        { value: 6, label: 'data6' }
      ],
      dialogVisible: false,
      dialogVisible2: false,
      detailVisible: false
    }
  },
  methods: {
    search() {
      this.$refs.table.reload(true)
    },
    reset() {
      this.$refs.searchForm.resetFields()
    },
    sex(row, column, cellValue, index) {
      if (cellValue === '0') {
        return '男'
      } else if (cellValue === '1') {
        return '女'
      } else if (cellValue === '2') {
        return '未知'
      } else {
        return ''
      }
    },
    handleAdd() {
      this.dialogVisible = true
    },
    handleDetail() {
      this.detailVisible = true
    },
    handleAddv2() {
      this.dialogVisible2 = true
    },
    handleDelete() {
      alert('删除数据')
    }
  }
}
</script>

<style>

</style>
